<template>
  <view>
    <view class="comment-bar">
      <span>用户评价</span><span @click="load">更多</span>
    </view>
    <view v-if="goodComment.length">
      <view class="detail_comment_main" v-for="(item, index) in goodComment" :key="index">
        <view class="user-info">
          <image class="image" :src="item.user.avatar" alt="" /><span>{{ item.user.uname}}</span>
        </view>
        <text class="text">{{ item.content }}</text>
        <view class="comment-info">
          <span>{{ formatDate(item.created) }}</span>{{ item.style }}<span></span>
        </view>
        <view class="comment-img">
          <image
		  class="image"
            v-for="(img, index) in item.images"
            :key="index"
            :src="img"
            alt=""
            @load="load"
          />
        </view>
      </view>
    </view>
    <view v-else class="none">
      <text class="text">当前暂无评论，期待亲贡献第一条评论哦~</text>
    </view>
  </view>
</template>

<script>
import { debounce } from "common/utils";
export default {
  name: "DetailComment",
  props: {
    goodComment: {
      type: Array,
      default() {
        return [];
      },
    },

  },
  data() {
    return {
      load: undefined,
    };
  },
  methods: {
    formatDate(num) {
      const date = new Date(num * 1000);
      return date.toLocaleDateString().replace(/\//g, "-");
    },
    loadComments() {
      this.$emit('detailGoodResourceLoad')
    },
  },
  created() {
    this.load = debounce(this.loadComments);
  },
};
</script>
<style lang="scss" scoped>

.detail_comment_main {
  width: 100%;
  padding-left: 40rpx;
  padding-right: 40rpx;
  box-sizing: border-box;
  padding: 0 40rpx 40rpx 40rpx;
}

.comment-bar {
  display: flex;
  justify-content: space-between;

  height: 80rpx;
  align-items: center;
  border-bottom: 2rpx solid rgb(236, 236, 236);
  border-top: 6rpx solid rgb(238, 238, 238);
  margin-top: 10rpx;
  padding-left: 40rpx;
  padding-right: 40rpx;
}

.user-info {
  align-items: center;
  display: flex;
  font-size: 1.1rem;

/* #ifdef H5 */
  gap: 20rpx;
  /* #endif */
  height: 140rpx;
}

.user-info > .image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}

.comment-info {
  font-size: 0.8rem;
  color: grey;
  height: 1.5rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* #ifdef H5 */
  gap: 10rpx;
  /* #endif */
}
.comment-img {
  display: flex;
  /* #ifdef H5 */
  gap: 10rpx;
  /* #endif */
}

.comment-img .image {
  width: 150rpx;
  height: 140rpx;
}

.none {
  height: 60rpx;
  line-height: 60rpx;
  color: red;
  font-size: 1rem;
  text-align: center;
}

.text{
	display: block;
}
</style>